\<!-- ProductPublishDialog.vue  -->
<template>
  <div v-if="visible" class="modal-mask">
    <div class="modal-wrapper">
      <div class="modal-container">
        <div class="modal-header">
          <h2>商品信息发布</h2>
          <span class="close-btn" @click="closeModal">×</span>
        </div>

        <form class="modal-body" @submit.prevent="submitForm">
          <div class="form-group">
            <label for="name">商品名称：</label>
            <input
                id="name"
                v-model.trim="formData.name"
                type="text"
                placeholder="请输入商品名称（2-60字）"
                maxlength="60"
                required
            >
          </div>

          <div class="form-group">
            <label for="description">商品介绍：</label>
            <textarea
                id="description"
                v-model.trim="formData.description"
                rows="4"
                placeholder="请输入详细商品描述（至少50字）"
                required
            ></textarea>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label for="price">销售价格：</label>
              <input
                  id="price"
                  v-model.number="formData.price"
                  type="number"
                  min="0"
                  step="0.01"
                  placeholder="0.00"
                  required
              >
            </div>
            <div class="form-group">
              <label for="seller">卖家信息：</label>
              <input
                  id="seller"
                  v-model.trim="formData.seller"
                  type="text"
                  placeholder="请输入卖家名称"
                  maxlength="30"
                  required
              >
            </div>
          </div>

          <div class="form-actions">
            <button type="button" @click="closeModal">取消</button>
            <button type="submit" :disabled="isSubmitting">
              {{ isSubmitting ? '提交中...' : '确认发布' }}
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GoodsPublish'
}
</script>

<script setup>
import { reactive, ref, watch } from 'vue'

const props = defineProps({
  visible: {
    type: Boolean,
    required: true
  }
})

const emit = defineEmits(['close', 'submit'])

const formData = reactive({
  name: '',
  description: '',
  price: null,
  seller: ''
})

const isSubmitting = ref(false)

const validateForm = () => {
  return (
      formData.name.length  >= 2 &&
      formData.description.length  >= 50 &&
      formData.price  > 0 &&
      formData.seller.length  >= 2
  )
}

const submitForm = async () => {
  if (!validateForm()) {
    alert('请按要求填写完整信息')
    return
  }

  isSubmitting.value  = true
  try {
    await emit('submit', { ...formData })
    closeModal()
  } finally {
    isSubmitting.value  = false
  }
}

const closeModal = () => {
  emit('close')
  Object.assign(formData,  {
    name: '',
    description: '',
    price: null,
    seller: ''
  })
}

watch(() => props.visible,  (newVal) => {
  if (newVal) {
    document.body.style.overflow  = 'hidden'
  } else {
    document.body.style.overflow  = 'auto'
  }
})
</script>

<style scoped>
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.modal-wrapper {
  width: 90%;
  max-width: 600px;
}

.modal-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  animation: modalSlide 0.3s ease-out;
}

@keyframes modalSlide {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.modal-header {
  padding: 16px 24px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h2 {
  margin: 0;
  font-size: 20px;
  color: #1f2937;
}

.close-btn {
  font-size: 24px;
  cursor: pointer;
  color: #6b7280;
  transition: color 0.2s;
}

.close-btn:hover {
  color: #374151;
}

.modal-body {
  padding: 24px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  color: #4b5563;
  font-weight: 500;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-actions {
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.form-actions button {
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s;
}

.form-actions button:first-child {
  background-color: #f3f4f6;
  color: #374151;
  border: 1px solid #e5e7eb;
}

.form-actions button:first-child:hover {
  background-color: #e5e7eb;
}

.form-actions button:last-child {
  background-color: #3b82f6;
  color: white;
  border: none;
}

.form-actions button:last-child:hover {
  background-color: #2563eb;
}

.form-actions button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
</style>